<template>
	<div class="notice-list table-theme">
		<head-title title="系统--系统公告"></head-title>
		<el-card>
			<div class="top-menu">
				<div class="menu-left">
					<tabs-view :list="classifyList" :tabsIndex="status" @roleType="statusSelect"></tabs-view>
					<div class="type-view">
						<el-select v-model="type" placeholder="类型" @change="init(page)">
							<el-option label="系统通知" :value="1"></el-option>
							<el-option label="活动通知" :value="4"></el-option>
						</el-select>
					</div>
				</div>

				<div class="menu-right">
					<refresh-button @refresh="refreshPage"></refresh-button>
					<div class="add">
						<el-button type="primary" @click="add">添加公告</el-button>
					</div>
				</div>
			</div>
			<p class="data-number">总店铺数：{{ total }}</p>
			<el-table :data="list">
				<el-table-column label="序号" align="center" prop="notice_id"></el-table-column>
				<el-table-column label="内容" align="center" prop="content"></el-table-column>
				<el-table-column label="时间" align="center" prop="add_time"></el-table-column>
				<el-table-column label="类型" align="center" prop="typeName"></el-table-column>

				<el-table-column label="上下架" align="center">
					<template slot-scope="scope">
						<el-switch v-model="scope.row.status" :active-value="1" :inactive-value="2" @change="upDown($event, scope.row.notice_id)"></el-switch>
					</template>
				</el-table-column>
				<el-table-column label="操作" align="center" width="180">
					<template slot-scope="scope">
						<el-button type="primary" size="mini" @click="edit(scope.row)">编辑</el-button>
						<el-button type="primary" size="mini" @click="del(scope.row.notice_id)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
			<div class="pages">
				<el-pagination background layout="prev, pager, next, jumper" :total="total" @current-change="init" :current-page="page"></el-pagination>
			</div>
		</el-card>

		<!-- 内容弹框 -->
		<el-dialog title="公告" :visible.sync="contentDialog" center :modal-append-to-body="false" width="680px">
			<el-form :model="contentForm" :rules="contentFormRules" ref="contentForm" label-width="120px">
				<div class="content-info">
					<el-form-item label="内容:" prop="content">
						<el-input type="textarea" :rows="6" placeholder="请输入内容" v-model="contentForm.content"></el-input>
					</el-form-item>
					<el-form-item label="类型:" prop="type">
						<el-select v-model="contentForm.type" placeholder="上下架">
							<el-option v-for="(item,index) in typeList" :key="index" :label="item.label" :value="item.value"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="链接:" prop="link" v-if="contentForm.type == 4">
						<el-input  placeholder="请输入内容" v-model="contentForm.link"></el-input>
					</el-form-item>
				</div>
			</el-form>

			<span slot="footer" class="dialog-footer">
				<el-button @click="contentDialog = false">取 消</el-button>
				<el-button type="primary" @click="submit('contentForm')">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	import TabsView from '@/components/TabsView'
	export default {
		components:{
			TabsView
		},
		data() {
			return {
				typeList: [{
						label: '系统通知',
						value: 1
					},
					{
						label: '活动通知',
						value: 4
					}
				],
				type: 1,
				isAdd: true,
				contentDialog: false,
				contentForm: {
					content: '',
					type: 1,
					link:''
				},
				contentFormRules: {
					content: [{
						required: true,
						message: '请输入内容'
					}],
					type: [{
						required: true,
						message: '必选'
					}]
				},
				list: [], // 列表
				total: 0,totalData: 0, 
				status: 0,
				page: 0,
				classifyList: ['所有', '上架','下架']
			};
		},
		methods: {
			// 初始化列表
			init(e) {
				this.page = e;
				let data = {
					page: e - 1 ? e - 1 : 0,
					limit: 10,
					status: this.status,
					type: this.type
				};

				if (this.status == 0) {
					delete data.status;
				}

				this.$http(this.$ApiList.NoticeList, data).then(res => {
					this.list = res.datas.data;
					this.total = res.datas.count;
				});
			},
			statusSelect(type) {
				this.status = type;
				this.init();
			},
			// 上下架
			upDown(e, notice_id) {
				let data = {
					notice_id: notice_id,
					status: e
				};
				this.$http(this.$ApiList.NoticeDown, data).then(res => {
					this.$layer.msg('操作成功');
				});
				this.page = 1;
				this.init();
			},
			refreshPage() {
				this.page = 1;
				this.type = 1;
				this.selectText = '';
				this.classSelect = '1';
				this.selectContent = '';
				this.init();
			},
			add() {
				delete this.contentForm.notice_id
				this.isAdd = true
				this.contentDialog = true;
			},
			submit(formName) {
				this.$refs[formName].validate(valid => {
					if (valid) {
						if (this.isAdd) {
							this.$http(this.$ApiList.NoticeAdd, this.contentForm).then(res => {
								this.$layer.msg('添加成功');
								this.contentDialog = false
								this.refreshPage()
							});
						} else {
							this.$http(this.$ApiList.NoticeEdit, this.contentForm).then(res => {
								this.$layer.msg('修改成功');
								this.contentDialog = false
								this.refreshPage()
							});
						}
					} else {
						this.$layer.msg('请填写完整信息后提交');
					}
				});
			},
			edit(row) {
				this.isAdd = false
				this.contentForm.type = row.type
				this.contentForm.link = row.link
				this.contentForm.content = row.content
				this.contentForm.notice_id = row.notice_id
				this.contentDialog = true;
			},
			del(notice_id) {
				this.$confirm('此操作将永久删除该公告, 是否继续?', '提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					})
					.then(() => {
						let data = {
							notice_id: notice_id
						};
						this.$http(this.$ApiList.NoticeDelete, data).then(res => {
							this.$layer.msg('删除成功');
							this.refreshPage()
						});
					})
					.catch(() => {});
			}
		},
		created() {
			this.init();
		}
	};
</script>
<style lang="scss" scoped>
	.notice-list {
	}
</style>
